<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../css/mui.min.css">
		<script src="../js/mui.min.js"></script>
		<script type="text/javascript">
			mui.init()
		</script>
		<style type="text/css">
			/* 选择器css覆盖list item按下时的颜色 */
			
			.mui-table-view-cell.mui-active {
				background-color: #E6E6FA;
			}
		</style>
	</head>

	<body style="background: #eeeeee;">
		<div class="mui-content">
			<!-- 【List展示】 简单的list-->
			<ul class="mui-table-view mui-table-view-chevron" style="margin-top: 15px;">
				<li class="mui-table-view-cell">
					<a href="accordion.html">accordion（折叠面板）</a>
					<span class="mui-badge">33</span>
				</li>
				<li class="mui-table-view-cell">
					<a href="actionsheet.html">actionsheet（操作表）</a>
					<span class="mui-badge">33</span>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" href="badge.html">badge （数字角标）</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" href="button.html">button （按钮）</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" href="cardview.html">cardview（卡片视图）</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" href="checkbox.html">checkbox（复选框）</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" href="dialog.html">dialog（对话框）</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" href="gallery.html">gallery（图片轮播）</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" href="grid.html">grid（栅格）</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" href="icon.html">icon(图标)</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" href="ipnut.html">ipnut (表单)</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" href="mask.html">mask (遮罩蒙版)</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" href="numbox.html">numbox(数字输入框)</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" href="offcanvas.html">offcanvas(侧滑导航)</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" href="picker.html">picker（选择器）</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" href="progressbar.html">progressbar（进度条）</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" href="transparentBar.html">transparentBar（透明标题栏）</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" href="radio.html">radio（单选框）</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" href="range.html">range（滑块）</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" href="scroll.html">scroll(区域滚动)</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" href="scroll2.html">scroll2(区域滚动2)</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" href="slide.html">slide（轮播组件）</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" href="switch.html">switch(开关)</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" href="popover.html">popover(弹出菜单)</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" href="pullrefresh.html">pullrefresh(下拉刷新)</a>
				</li>
			</ul>

			<!-- 【List展示】图文的 list-->
			<ul class="mui-table-view" style="margin-top: 5px;">
				<li class="mui-table-view-cell mui-media">
					<a href="javascript:;">
						<img class="mui-media-object mui-pull-left" style=" width: 100%;" src="http://img5.imgtn.bdimg.com/it/u=2815533304,3639429167&fm=26&gp=0.jpg">
						<div class="mui-media-body">
							幸福
							<p class='mui-ellipsis'>能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media">
					<a href="javascript:;">
						<img class="mui-media-object mui-pull-left" src="http://pic2.52pk.com/files/allimg/161014/5329500_151KM3F.jpg">
						<div class="mui-media-body">
							木屋
							<p class='mui-ellipsis'>想要这样一间小木屋，夏天挫冰吃瓜，冬天围炉取暖.</p>
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media">
					<a href="javascript:;">
						<img class="mui-media-object mui-pull-left" src="http://pic.qqtn.com/up/2016-9/201609211308319798231.png">
						<div class="mui-media-body">
							CBD
							<p class='mui-ellipsis'>烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
						</div>
					</a>
				</li>
			</ul>

		</div>
	</body>

</html>